<template>
    <div class="fiex-class">
        <table>
            <thead>
                <tr>
                    <th>订单号</th>
                    <th>订单状态</th>
                    <th>金额</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="order in orders">
                    <td>{{ order.orderNo }}</td>
                    <td>{{ getOrderStr(order) }}</td>
                    <td class="amount">￥{{ order.price?.toFixed(2) || 0 }}</td>
                    <td>
                        <a-button @click="upLoadSource(order)" v-if="order.status == 1 && order.fileId == null"
                            block>上传源码分析</a-button>

                        <a-button @click="openRult(order)" v-if="order.status == 2 && order.fileStatus == 1"
                            block>查看分析结果</a-button>
                    </td>
                </tr>
            </tbody>
        </table>
        <orderUpload ref="orderUploadRef" :orderInfo="orderInfo"></orderUpload>
    </div>
</template>
<script setup>
import { myOrderList } from '@/api/user.js'
import { ref } from 'vue'
import orderUpload from '../../components/orderUpload.vue';
const orders = ref([])
const orderUploadRef = ref();
const orderInfo = ref({})
import { useRouter } from "vue-router";
const router = useRouter();
const getOrderStr = (order) => {
    if (order.status == 0) {
        return "待支付"
    }
    if (order.status == 1 && order.fileId == null) {
        return "待上传源码"
    }
    if (order.status == 1 && order.fileStatus == 0) {
        return `源码分析中(${order.progress || 0})`
    }

    if (order.status == 2 && order.fileStatus == 1) {
        return "源码分析完成"
    }
}

const openRult = (order) => {
    router.push(`/progress?id=${order.fileId}`)
}

myOrderList().then(data => {
    orders.value = data.data.order
})
const upLoadSource = order => {
    orderInfo.value = order
    orderUploadRef.value.openModal();
}
</script>
<style scoped>
@keyframes glow {
    0% {
        text-shadow: 0 0 5px #000000, 0 0 10px #000000;
    }

    100% {
        text-shadow: 0 0 20px #000000, 0 0 30px #000000;
    }
}

table {
    width: 70%;
    border-collapse: collapse;
}

th,
td {
    padding: 15px;
    text-align: left;
    transition: background 0.3s;
}

th {
    background-color: #2a2a2a;
    font-size: 1.2em;
    text-transform: uppercase;
    border-bottom: 2px solid #2a2a2a;
}

tr:nth-child(even) {
    background-color: #2b2b2b;
}

tr:hover {
    background-color: #444;
    transform: scale(1.02);
    transition: transform 0.3s;
}

tr {
    color: white;
}

.amount {
    color: #ff8c00;
    font-weight: bold;
}

.fiex-class {
    display: flex;
    justify-content: center;
}
</style>